import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/Home.vue'
// console.log('VueRouter',VueRouter);
Vue.use(VueRouter)

const routes = [
  {
    path: '/',                              //路由路径：这条路由规则对象对应的路由路径
    name: 'home',
    // redirect: "",                        //路由重定向
    // alias:"" | [""],                     //路由别名     值类型："" | [""]
    // meta: any,                           //路由元信息。 值类型：any
    // props:boolean | Object | Function,   //路由组件传参。 值类型：boolean | Object | Function
    // caseSensitive: false,                //匹配规则是否大小写敏感？(默认值：false)   // 2.6.0+
    // pathToRegexpOptions: {},             //编译正则的选项    // 2.6.0+
    component: ()=> import(/* webpackChunkName: "home" */ '../views/Home.vue'),      //路由所对应要加载的作为页面的组件
    // components: {},                      //命名视图各自要加载的组件
    // children:[],                         //嵌套路由。每一项都是一个路由配置项
    // beforeEnter(){},                     //路由独享守卫
  },

  {
    // path: '/router',       //这种写法 quary和param两种路由跳转方式都可以跳转。不过params的方式地址栏就没有参数了
    path: '/router/:userId/:userName',  //这种写法 quary传参跳转不过去，params传参才可以
    name: 'router',
    component: ()=> import(/* webpackChunkName: "router" */ '../views/Router.vue')
  },

  {
    // 会匹配以 `/user-` 开头的任意路径
    // path: '/user-*',
    path: '*',  //可用于 history 模式下，找不到路由对应的页面时，展示一个通用的组件(404页面)
    component: ()=> import(/* webpackChunkName: "router" */ '../views/Home.vue')


    // 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：
    // 给出一个路由 { path: '/user-*' }
    // this.$router.push('/user-admin')
    // this.$route.params.pathMatch // 'admin'
    // // 给出一个路由 { path: '*' }
    // this.$router.push('/non-existing')
    // this.$route.params.pathMatch // '/non-existing'


    // 同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。
    // { path: '/users/:id', component: UserComponent },    // 不要打开
    // { path: '/users', component: UsersComponent }        // 不要打开
  }
]

const router = new VueRouter({
  routes: routes,        //路由的路由规则列表数组，每条规则都一个页面的路由对象
  mode: "hash",          //可选值: `"hash" | "history" | "abstract"
  // history: "",           //router4.x的选项，同mode一样作用
  base: "/",          //路由的的基础路径 (默认为“/”)。

  // linkActiveClass,       // 全局配置 <router-link> 默认的激活的 class。
  // linkExactActiveClass,  // 全局配置 <router-link> 默认的精确激活的 class。
  // parseQuery,            // 提供自定义查询字符串的解析/反解析函数。覆盖默认行为。
  // stringifyQuery,        // 提供自定义查询字符串的解析/反解析函数。覆盖默认行为。
  // fallback,              // 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
  scrollBehavior: (to, from, savedPosition) => {    // 滚动行为
    // return 期望滚动到哪个的位置
    // return { 
    //   el:"document.documentElement",             // 期望滚动到的目标元素或选择器，并以此为原点进行滚动，默认值：document.documentElement
    //   top: 0, left: 0 
    // }
  }
})
// console.log(router);

// console.log("路由对象的属性:=============================================================================================================================================================");
// console.log("路由对象的属性:=============================================================================================================================================================");
// console.log("路由对象的属性:=============================================================================================================================================================");

  // 路由对象的属性：
  // console.log("currentRoute", router.currentRoute);  //获取当前页面的路由对象  类似于this.$route
  // console.log("mode", router.mode);                  //获取路由使用的模式
  // console.log("history", router.history);            //获取路由跳转的历史记录栈
  // console.log("options", router.options);            //获取路由对象的配置，也就是路由的构建选项的键值对
  // console.log("matcher", router.matcher);            //获取

  // console.log("app", router.app);                    //null  配置了 router 的 Vue 根实例。
  // console.log("START_LOCATION", router.START_LOCATION);  // 以路由对象的格式展示初始路由地址，即路由开始的地方。可用在导航守卫中以区分初始导航。
  // console.log("apps", router.apps);                  //[]
  // console.log("fallback", router.fallback);          //false
  // console.log("beforeHooks", router.beforeHooks);    //[]
  // console.log("afterHooks", router.afterHooks);      //[]
  // console.log("resolveHooks", router.resolveHooks);  //[]

// console.log("路由对象的方法:=============================================================================================================================================================");
// console.log("路由对象的方法:=============================================================================================================================================================");
// console.log("路由对象的方法:=============================================================================================================================================================");
// 路由对象的方法：

  // router.push()
  // router.replace()
  // router.forward()
  // router.back()
  // router.go()
  // router.addRoute([parentName], routeConfig)     // 动态添加路由(父路由或子路由)
  // console.log(router.getRoutes());               // 获取所有活跃的路由记录列表数组。
  // console.log(router.getMatchedComponents());    // 返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类，不是实例)。
  // router.resolve()
  // router.onError(callback)                       // 传入一个回调，该回调会在路由导航过程中出错时被调用
  router.onReady(()=>{      
    console.log("onReady: 在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。");
  },()=>{ console.log("error"); })
  // router.match()
  // router.init()

// console.log("路由导航守卫钩子方法：——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————");
// console.log("路由导航守卫钩子方法：——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————");

//前置导航守卫：  在路由被验证之前执行。  改变地址栏url的参数来复用组件时也会执行这个函数
router.beforeEach((to, from, next)=>{
  // console.log("beforeEach:to", to);
  // console.log("beforeEach:from", from);
  next()            // 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  // next(false)    // 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  // next('/') 或者 next({ path: '/' }):  // 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，
  // next(error): (2.4.0+)      // 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
})

// `全局后置钩子`。在切换组件，地址栏url确认进入之后执行。没有next（）函数
router.afterEach((to, from)=>{
  // console.log("afterEach:to", to);
})

// 全局解析守卫:  在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。
router.beforeResolve((to, from, next)=>{
  // console.log("beforeResolve");
  next()
})



// console.log("当前页面路由路径：=============================================================================================================================================================");
// console.log("当前页面路由路径：=============================================================================================================================================================");
// console.log("当前页面路由路径：=============================================================================================================================================================");
// console.log("currentRoute", router.currentRoute);   //获取当前页面的路由对象  相当于this.$route

router.currentRoute.name//**获取当前路由的名称**
router.currentRoute.fullPath//**完成解析后的 URL，路由路径，含参数和hash值**
router.currentRoute.path//**字符串，对应当前路由的路径，总是解析为绝对路径**
router.currentRoute.params//**一个对象，获取当前路径的参数**
router.currentRoute.query//**一个对象，获取当前路径的参数**
router.currentRoute.hash//**获取当前路径的hash值(不带#)，如果没有就返回字符串**
router.currentRoute.matched//**返回一个数组，包含当前路由的所有嵌套路径片段的路由记录，路由记录就是routes配置数组中的对象副本。**
router.currentRoute.meta//**获取当前路径的路由规则中的meta值（路由元信息）, 包括这条路径中子路由的 meta 值 **
console.log("=============================================================================================================================================================");

export default router
